import React from 'react';
import { createModalContainer } from '../../../components/changeModal';
import {Button,Form , message, Select} from 'antd';
import { connect } from 'dva';
const FormItem = Form.Item;
const Option = Select.Option;

@Form.create()
class ChangeLebalComponent extends React.Component {
  constructor(props) {
      super(props);
      this.state = {}
  }

  componentWillMount() {
    window.Isoption = false;
  }
  componentDidMount() {
    window.Isoption = true;
  }


    //取消
    handleCancel =() => {
    this.props.cancel();
    }

    handleChange = value => {
        this.setState({
            TagId: value
        })
    }

    //提交
    handleSubmit = e => {
        e.preventDefault();
        const { dispatch } = this.props;
        const selectedUserIds = this.props.param.selectedUserIds;
            this.props.form.validateFields(async (err, values) =>{
                if(!err) {
                    dispatch({
                        type: 'pruductSellList/UpdateProductsTags',
                        payload: {
                            ProductIds:selectedUserIds.toString(),
                            TagId: values.TagId
                        },
                        callBack: {
                            success: res => {
                            if (res.Code === 0) {
                                message.success('修改成功');
                                this.props.ok();
                            }
                            },
                            error: res => {
                            message.error(res.Msg);
                            },
                        },
                    })               
                }
            })
    }

    render() {
      const {getFieldDecorator} = this.props.form;
      const formItemLayout = {
        labelCol: {
          span: 10 ,
        },
        wrapperCol: {
          span: 12 ,
        },
      };
      const {productTagList, loading1} = this.props;
        return (
            <div style={{marginTop: 24}}>
                <Form onSubmit={this.handleSubmit}>
                    <FormItem label="选择商品标签" {...formItemLayout}>
                        {getFieldDecorator('TagId', {
                            // initialValue: dataName,
                            rules: [
                                {required: true, message: '请选择标签'},
                            ]
                        })(
                        <Select
                            placeholder="请选择"
                            onChange={this.handleChange}
                        >
                            {
                                productTagList&&productTagList.map((item, index)=> (<Option key={index} value={item.id}>{item.name}</Option>))
                            }
                        </Select>
                        )}
                    </FormItem>
                    <FormItem className="xkd-model-footBtn">
                        <Button onClick={this.handleCancel} className="xkd-mr8">
                            取消
                        </Button>
                        <Button
                            type="primary"
                            htmlType="submit"
                            loading={loading1}
                        >
                            保存
                        </Button>
                    </FormItem>
                </Form>
           </div>
        )
    }
}

const ChangeLebal = createModalContainer(
    connect(({pruductSellList, loading})=> ({
        productTagList: pruductSellList.productTagList,
        loading1: loading.effects['pruductSellList/UpdateProductsTags'], 
    }))(ChangeLebalComponent),
    true,
    true
);

export default ChangeLebal;
